<template>
  <div class="goodsDetailspage-container">
    <p style="text-align: center">商品详情页</p>
    <!-- 轮播图区域 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in gallery" :key="item.id">
        <img :src="item" />
      </van-swipe-item>
    </van-swipe>
    <!-- 详情区域 -->
    <div class="details">
      <div class="top">
        <h2>{{ info.name }}</h2>
      </div>
      <div class="bottom">
        <!-- 介绍 -->
        <van-row class="introduce">
          <van-col span="24" class="colorccc"
            ><span>{{ info.brief }}</span></van-col
          >
        </van-row>
        <!-- 价格 -->
        <van-row class="Price">
          <van-col span="24" type="flex"
            ><del>原价：{{ info.counterPrice }}</del
            ><span>现价：{{ info.retailPrice }}</span></van-col
          >
        </van-row>
        <!-- 制造商 -->
        <van-row class="manufacturer">
          <van-col span="24"
            ><span>{{ brand.name }}</span></van-col
          >
        </van-row>
        <!-- 规格数量选择 -->
        <van-row type="flex" justify="space-between" class="Specifications">
          <van-col><span>规格数量选择</span></van-col>
          <van-col><van-icon @click="choice" name="arrow"/></van-col>
        </van-row>
      </div>
    </div>

    <!-- 规格数量选择的弹出框 组件 -->
    <van-popup v-model="show" position="bottom" closeable :style="{ height: '60%' }">
      <van-col span="24" class="centenr-box1">
        <van-col span="8">
          <div>
            <img :src="info.picUrl" alt="" />
          </div>
        </van-col>
        <van-col span="16" class="Price-p">
          <h4>价格：￥{{ info.retailPrice }}</h4>
          <p style="color:red">{{ obj[0] }} {{ obj[1] }}</p>
        </van-col>
      </van-col>
      <!-- 规格 -->
      <van-row>
        <!-- 规格 和颜色 双for循环 -->
        <van-col span="24" class="centenr-box2" :key="item1.id" v-for="(item1, index1) in Specifications">
          <p>{{ item1.name }}</p>
          <div>
            <!-- 颜色 -->
            <span :class="item2.isChecked ? 'red' : ''" :key="item2.id" v-for="item2 in item1.valueList" @click="onChange(item2, item1, index1)">{{ item2.value }}</span>
          </div>
        </van-col>
      </van-row>
      <!-- 数量 -->
      <van-col span="24" class="centenr-box2">
        <p>数量</p>
        <div>
          <!-- 步进器 -->
          <van-stepper v-model="value" min="1" max="5" input-width="6rem" button-size="3.2rem" />
        </div>
      </van-col>
      <van-col span="24" class="centenr-button">
        <van-goods-action>
          <van-goods-action-button type="warning" @click="addCart()" text="加入购物车" />
          <van-goods-action-button type="danger" @click="BuyNow()" text="立即购买" />
        </van-goods-action>
      </van-col>
    </van-popup>

    <!-- 评论区域 -->
    <div class="evaluate">
      <!-- 标题 -->
      <van-row class="title" type="flex" justify="space-between">
        <van-col>评价({{ comment.count }})</van-col>
        <van-col @click="Evaluationpage">查看全部<van-icon @click="Evaluationpage" name="arrow"/></van-col>
      </van-row>
      <!-- 评论区域 -->
      <van-row v-for="item in comment.data" :key="item.id">
        <!-- 用户头像和时间区域 -->
        <van-row class="userhead" type="flex" justify="space-between">
          <van-col>
            <div style="display: flex">
              <img class="headportrait" :src="item.avatar" />
              <p>{{ item.nickname }}</p>
            </div>
          </van-col>
          <van-col>{{ item.addTime }}</van-col>
        </van-row>
        <!-- 评论图片区域 -->
        <van-row type="flex" justify="space-between" class="comment">
          <van-col>{{ item.content }} </van-col>
          <van-col><img :src="item.picList" alt=""/></van-col>
        </van-row>
      </van-row>
    </div>

    <!-- 商品参数区域 -->
    <div class="parameters">
      <h3>商品参数</h3>
      <div v-for="item in attribute" :key="item.id">
        <span>{{ item.attribute }}</span>
        <span>{{ item.value }}</span>
      </div>
    </div>

    <!-- 常见问题区域 -->
    <div class="commonproblem">
      <p><span>——</span> 常见问题 <span>——</span></p>
      <div v-for="item in issue" :key="item.id">
        <p><van-icon dot />{{ item.question }}</p>
        <p>{{ item.answer }}</p>
      </div>
    </div>
    <p style=" text-align: center">大家都在看</p>

    <!-- 大家都在看 其他商品 -->
    <div class="othergoods">
      <div class="goods" v-for="item in relatedGoods" :key="item.id" @click="gogoods(item)">
        <div class="top">
          <img :src="item.picUrl" alt="" />
        </div>
        <div class="bottom">
          <p>{{ item.brief }}</p>
          <p>
            ￥ <span>{{ item.retailPrice }}</span>
          </p>
        </div>
      </div>
    </div>

    <!-- 底部区域 -->
    <!-- footer -->
    <van-goods-action>
      <van-goods-action-icon icon="star" :color="careIcon" @click="Collection" />
      <van-goods-action-icon icon="cart-o" :badge="Shoppingcartlogo" />
      <van-goods-action-button type="warning" @click="choice" text="加入购物车" />
      <van-goods-action-button type="danger" @click="BuyNow" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import { Notify } from 'vant'
import { Toast } from 'vant'
export default {
  // 导入加入购物车的组件
  name: 'YanxuanshangchengGoodsDetailsPage',
  data() {
    return {
      // 购物车徽标
      Shoppingcartlogo: 0,
      // 获取商品详情页的数据
      goodslist: [],
      //商品详情
      info: '',
      // 弹出框的显示与隐藏
      show: false,
      // 爱心收藏的状态
      collectionflag: false,
      // 进步器,
      value: 1,
      //不同规格商品列表
      productList: '',
      //商品评价列表
      comment: '',
      //商品参数列表
      attribute: '',
      //常见问题列表
      issue: '',
      //关联商品列表（【大家都在看】列表）
      relatedGoods: '',
      gallery: [],
      info: [],
      brand: [],
      careIcon: '',
      // 不同商品的规格
      // isChecked: false,
      Specifications: [],
      obj: {} // 规格0 颜色1 {0:'1.5m',1:'浅杏色'}
    }
  },

  mounted() {
    // 打印传递过来的值
    console.log('当前的商品ID是', this.$route.query.id)
    // 获取商品详情页的数据
    this.getgoodsList()
  },

  methods: {
    // 获取商品详情页的数据
    getgoodsList() {
      this.$get(this.$api.goodsDetail, { id: this.$route.query.id }).then(result => {
        if (result.data.errno !== 0) {
          return
        }
        // 赋值
        this.goodslist = result.data.data
        // console.log(this.goodslist)
        this.gallery = result.data.data.info.gallery
        // console.log(this.gallery)
        //不同规格商品列表
        this.productList = result.data.data.productList
        console.log('//不同规格商品列表', this.productList)
        //商品评价列表
        this.comment = result.data.data.comment
        // console.log('//商品评价列表的数据是', this.comment)
        //商品参数列表
        this.attribute = result.data.data.attribute
        // console.log('//商品参数列表', this.attribute)
        //常见问题列表
        this.issue = result.data.data.issue
        // console.log('//常见问题列表', this.issue)
        //关联商品列表（【大家都在看】列表）
        this.relatedGoods = result.data.data.relatedGoods
        // console.log('（【大家都在看】列表', this.relatedGoods)
        // 商品详情
        this.info = result.data.data.info
        // console.log('商品详情', this.info)
        // 商品规格数量列表
        this.Specifications = result.data.data.specificationList
        // console.log(' 商品规格数量列表', this.Specifications)
        this.brand = result.data.data.brand

        //  变换类名 (排他)
        this.Specifications.forEach(item1 => {
          item1.valueList.forEach(item2 => {
            // item2.isChecked = false // 没有响应式效果
            // this.$set(添加的对象，添加的键，值) // 给对象添加响应式的键值
            this.$set(item2, 'isChecked', false)
          })
        })
        // console.log(this.Specifications)
      })
    },
    // 规格数量选择
    choice() {
      // console.log(11)
      this.show = true
    },
    // 收藏功能
    Collection() {
      // 未登录账号跳转登录页操作
      if (!this.$cookie.get('username') && !this.$cookie.get('token')) {
        return this.$router.push('/login')
      }
      // 登录账号了的操作

      // 收藏的操作
      if (!this.collectionflag) {
        // 发起收藏的请求
        this.$post(this.$api.collectAddordelete, {
          type: 1, //0表示收藏列表，1表示专题列表
          valueId: this.$route.query.id //商品ID
        }).then(result => {
          console.log(result.data)
          // 成功通知
        })

        this.careIcon = '#fb4f31'
        this.collectionflag = true
      }
      // 取消收藏的操作
      else {
        // 发起取消收藏的请求
        this.$post(this.$api.collectAddordelete, {
          type: 1, //0表示收藏列表，1表示专题列表
          valueId: this.$route.query.id //商品ID
        }).then(result => {
          console.log(result.data)
        })
        this.careIcon = ''
        this.collectionflag = false
      }
    },
    // 跳转到评价全部页
    Evaluationpage() {
      this.$router.push({ path: '/evaluationpage', query: this.info })
    },
    // 跳转到其他商品页面的详情页
    gogoods(item) {
      console.log(item.id)
      this.$router.push({ path: '/goodsdetailspage', query: { id: item.id } })
      location.reload()
    },
    //选择 规格的点击事件
    onChange(item2, item1, index1) {
      item2.isChecked = true
      item1.valueList.forEach(element => {
        if (element !== item2) {
          element.isChecked = false
        }
      })
      // 将已经选择好的数据收集起来
      this.obj[index1] = item2.value
      // console.log(item1)
      // console.log('当前的obj里面有', this.obj)
    },
    // 加入购物车
    addCart() {
      var productId
      // 通过对比 规格的数组  得出 对应的ID 并且存起来
      this.productList.forEach(element => {
        // toString()
        let goodsId = element.specifications.toString() == Object.values(this.obj).toString()
        // console.log(goodsId)
        if (goodsId) {
          productId = element
          console.log(productId.id)
        }
      })
      this.$post(this.$api.cartAdd, {
        goodsId: this.$route.query.id, //当前商品ID
        number: this.value, //商品数量
        productId: productId.id //当前商品指定规格的商品ID
      }).then(result => {
        console.log(result.data)
        // 赋值给购物车徽标
        this.Shoppingcartlogo = result.data.data
        // 成功通知
        // Notify({ type: 'success', message: '通知内容' })
        if (result.data.errno !== 0) {
          return Notify({ type: 'danger', message: '加入购物车失败，已经没有库存了' })
        }
        Toast.success('加入购物车成功')
      })
      // console.log(parameter)
    },
    // 前往立即购买页
    BuyNow() {
      this.$router.push({ name: 'Confirmorder' })
    }
  }
}
</script>

<style lang="less" scoped>
.red {
  color: red;
  border: 1px solid #ff0000 !important;
}
.goodsDetailspage-container {
  background-color: #f4f4f4;
  // 隐藏旁边的侧边提升 下拉显示
  max-height: calc(100vh - 0rem);
  overflow: auto;
  &::-webkit-scrollbar {
    display: none;
  }
}

// 轮播图样式
.my-swipe {
  height: 30rem;
}

.van-swipe-item {
  color: #fff;
  font-size: 2rem;
  line-height: 30rem;
  img {
    width: 100%;
    height: 100%;
  }
}

// 详情区域
.details {
  height: 20rem;
  .top {
    width: 100%;
    height: 4rem;
    line-height: 4rem;
    background-color: #f4f4f4;
    h2 {
      padding: 0;
      margin: 0;
      margin-left: 1rem;
    }
  }
  .bottom {
    background-color: #fff;
    .van-row {
      margin-top: 1rem;
      .van-col {
        span,
        del {
          margin-left: 1rem;
        }
      }
    }
    // 介绍
    .introduce {
      color: #bfbfbf;
      font-size: 1.4rem;
    }
    // 价格
    .Price {
      del {
        color: #bfbfbf;
      }
      span {
        color: #c9b58e;
      }
    }
    // 制造商
    .manufacturer {
      span {
        border: 0.1rem solid #f7a855;
        color: #f7a855;
        font-size: 1.6rem;
      }
    }
    // 规格数量选择
    .Specifications {
      height: 5rem;
      line-height: 5rem;
      border-top: 0.1rem solid #ccc;
      .van-icon {
        padding-right: 1rem;
      }
    }
  }
}

// 评价区域
.evaluate {
  min-height: 40rem;
  background-color: #fff;
  // 头像
  .headportrait {
    margin-top: 1rem;
    width: 3rem;
    height: 3rem;
  }
  min-height: 30rem;
  .van-col {
    padding: 0 1rem 0 1rem;
  }
  // 标题区域
  .title {
    height: 5rem;
    align-items: center;
    border-bottom: 00.1rem solid #ccc;
  }
  // 用户头像
  .userhead {
    align-items: center;
  }
  // 评论图片区域
  .comment {
    margin-top: 1rem;
    img {
      width: 8rem;
      height: 7rem;
    }
  }
}

// 商品参数区域
.parameters {
  margin-top: 1rem;
  width: 100%;
  background-color: #fff;
  min-height: 30rem;
  h3 {
    margin: 0;
    margin-left: 1rem;
  }
  div {
    width: 85%;
    margin-left: 5%;
    padding: 1rem;
    background-color: #f7f7f7;
    height: 8rem;
    margin-top: 1rem;
    span:nth-child(2) {
      margin-left: 1rem;
    }
  }
}
// 常见问题区域
.commonproblem {
  background-color: #fff;
  height: 35rem;
  > p {
    margin: 0;
    text-align: center;
    span {
      color: #d8d8d8;
    }
  }
  > div {
    p {
      margin: 0;
    }
    > p:nth-child(1) {
      margin-left: 1rem;
      position: relative;
      margin-top: 1rem;
      .van-icon {
        position: absolute;
        margin-top: 1.1rem;
        left: -0.5rem;
      }
    }
    > p:nth-child(2) {
      margin-top: 0.5rem;
      color: #bfbfbf;
      font-size: 1.4rem;
    }
  }
}

// 大家都在看 其他商品
.othergoods {
  display: flex;
  flex-wrap: wrap;
  height: 70rem;
  background-color: #fff;
  margin-bottom: 5rem;
  // 下的商品
  .goods {
    text-align: center;
    border: 0.1rem solid #ccc;
    width: 49.4%;
    > .top {
      height: 70%;
      img {
        width: 80%;
        height: 100%;
        padding: 1rem;
      }
    }
    .bottom {
      p {
        overflow: hidden;
        margin: 0;
      }
      > p:nth-child(2) {
        color: red;
      }
    }
  }
}

// 底部区域

// <!-- 规格数量选择的弹出框 -->
// 弹出框的第一个盒子
.centenr-box1 {
  height: 10rem;
  .van-col {
    padding: 0.1rem;
    h4 {
      font-size: 1.8rem;
      margin: 0;
      margin-top: 2rem;
      margin-bottom: 1rem;
    }
    p {
      opacity: 0.7;
      margin: 0;
    }
    div {
      height: 10rem;
      // background-color: rgb(247, 242, 242);
      img {
        width: 90%;
        margin-left: 1rem;
        height: 100%;
      }
    }
  }
}

// 规格
.centenr-box2 {
  padding: 0.1rem;
  p {
    margin: 0;
    margin-bottom: 1rem;
    margin-top: 1rem;
  }
  div {
    margin-top: 0.1rem;
    span {
      padding: 0.5rem 1rem;
      border: 1px solid #000;
      opacity: 0.7;
      margin-right: 1rem;
      margin-bottom: 1rem;
    }
  }
}
// 商品
</style>
